<script lang="ts" setup="">
import * as echarts from 'echarts'
import { onMounted, ref } from 'vue'
import china from '@/assets/resource/mapData/china.json'
import { DataPM } from '../../../test'

let { width, height } = defineProps({
    width: {
        type: String,
        default: '900px'
    },
    height: {
        type: String,
        default: '400px'
    }
})

const myEchart = echarts,
    chinaChart = ref<HTMLElement>()

onMounted(() => {
    initChart()
})

function initChart() {
    myEchart.registerMap('china', china as unknown as 'FeatureCollection')
    let chart = myEchart.init(chinaChart.value as unknown as HTMLElement),
        option = {
            geo: {
                // 类型为地图
                type: 'map',
                // 地图的数据，必须和echarts全局中注册的china名称一致
                map: 'china',
                // 显示地图各个省份的名称
                label: {
                    show: true
                },
                // 地图的缩放比例
                zoom: 1,
                // 设置允许拖动缩放
                roam: true
                // 以经纬度作为地图的中心点
                // center: [121.509062, 25.044332]
            },
            series: [
                {
                    // 每个省的空气质量数据
                    data: DataPM,
                    // 将空气质量的数据和geo进行关联
                    geoIndex: 0,
                    // 关联的类型
                    type: 'map'
                }
            ],
            //
            visualMap: {
                // 指定最小值
                min: 0,
                // 指定最大值
                max: 200,
                // 指定空气质量变化的颜色
                inRange: {
                    color: ['#ffffff', '#1890ff']
                },
                // 出现滑块，过滤空气质量的城市
                calculable: true
            }
        }
    chart.setOption(option)
    window.onresize = function () {
        chart.resize()
    }
}
</script>

<template>
    <div
        ref="chinaChart"
        :style="{ width, height }"
    ></div>
</template>

<style lang="scss" scoped></style>
